﻿@{
    ViewBag.Title = "System Upgrade";
    ViewBag.SubTitle = "wizards";
}

<!-- row -->
<div class="row">
	
	<!-- col -->
	<div class="col-xs-12 col-sm-3 col-md-4 col-lg-4">
		<h1 class="page-title txt-color-blueDark">
			
			<!-- PAGE HEADER -->
			<i class="fa-fw fa fa-upload"></i> 
				@ViewBag.Title 
			<span>>  
				@ViewBag.SubTitle 
			</span>
		</h1>
	</div>
	<!-- end col -->
    @{
        Html.RenderAction("Sparks", "Home");
    }
</div>
<!-- end row -->

<!--
	The ID "widget-grid" will start to initialize all widgets below 
	You do not need to use widgets if you dont want to. Simply remove 
	the <section></section> and you can use wells or panels instead 
	-->

<!-- widget grid -->
<section id="widget-grid" class="">

	<!-- row -->
	<div class="row">
		
		<!-- NEW WIDGET START -->
		<article class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
			
			<!-- Widget ID (each widget will need unique ID)-->
			<div class="jarviswidget" id="system-upgrade-wizard" data-widget-editbutton="false">
				<!-- widget options:
					usage: <div class="jarviswidget" id="wid-id-0" data-widget-editbutton="false">
					
					data-widget-colorbutton="false"	
					data-widget-editbutton="false"
					data-widget-togglebutton="false"
					data-widget-deletebutton="false"
					data-widget-fullscreenbutton="false"
					data-widget-custombutton="false"
					data-widget-collapsed="true" 
					data-widget-sortable="false"
					
				-->
				<header>
					<span class="widget-icon"> <i class="fa fa-tasks"></i> </span>
					<h2>System Upgrade Wizard </h2>				
				</header>

				<!-- widget div-->
				<div>
					
					<!-- widget edit box -->
					<div class="jarviswidget-editbox">
						<!-- This area used as dropdown edit box -->
						<!-- Normally there would be an input text box here to change widget title. 
							Use this area only if plan to let users change widget title --> 
					</div>
					<!-- end widget edit box -->
					
					<!-- widget content -->
					<div class="widget-body">
						
						<div class="row">
							<form id="wizard-1" novalidate="novalidate">
								<div id="bootstrap-wizard-1" class="col-sm-12">
									<div class="form-bootstrapWizard">
										<ul class="bootstrapWizard form-wizard">
											<li class="active" data-target="#step1">
												<a href="#tab1" data-toggle="tab"> <span class="step">1</span> <span class="title">Backup All Datas</span> </a>
											</li>
										    <li data-target="#step2">
										        <a href="#tab2" data-toggle="tab"> <span class="step">2</span> <span class="title">Apply Upgrade Package</span> </a>
										    </li>
										    <li data-target="#step3">
										        <a href="#tab3" data-toggle="tab"> <span class="step">3</span> <span class="title">Restart WebSite</span> </a>
										    </li>
										    <li data-target="#step4">
										        <a href="#tab4" data-toggle="tab"> <span class="step">4</span> <span class="title">Restore All Datas</span> </a>
										    </li>
										</ul>
										<div class="clearfix"></div>
									</div>
									<div class="tab-content">
										<div class="tab-pane active" id="tab1">
											<br>
											<h3><strong>Step 1 </strong> - Backup All Datas</h3>

										    <div class="row">

										        <div class="col-sm-2">
													
										            <button type="button" class="btn btn-xs btn-warning"
										                    data-progress-text="processing..."
										                    data-finish-text="备份完成!"
										                    id="startBackup"
										                >开始</button>

										        </div>

										        <div class="col-sm-10">
                                                    
										            <div class="progress">
										                <div id="backupProcess" class="progress-bar bg-color-blueLight"></div>
										            </div>

										        </div>

										    </div>
                                            
                                            <div class="row">

									            <div class="col-sm-12">
													
									                <textarea id="infoBackup" class="form-control" rows="10"></textarea>

									            </div>
                                                
									        </div>

										</div>
									    <div class="tab-pane" id="tab2">
									        <br>
									        <h3><strong>Step 2</strong> - Apply Upgrade Package</h3>
                                            
									        <div class="row">

									            <div class="col-sm-2">
													
									                <button type="button" class="btn btn-xs btn-warning"
									                        data-progress-text="processing..."
									                        data-finish-text="升级完成!"
									                        id="startUpgrade"
									                    >开始</button>

									            </div>
                                                
                                                <div class="col-sm-10">
                                                    
												    <div class="progress">
													    <div id="upgradeProcess" class="progress-bar bg-color-blueLight"></div>
												    </div>

												</div>
                                                
									        </div>
                                            
                                            <div class="row">

									            <div class="col-sm-12">
													
									                <textarea id="infoUpgrade" class="form-control" rows="10"></textarea>

									            </div>
                                                
									        </div>

									    </div>
									    <div class="tab-pane" id="tab3">
									        <br>
									        <h3><strong>Step 3</strong> - Restart WebSite</h3>

									    </div>
                                        <div class="tab-pane" id="tab4">
											<br>
											<h3><strong>Step 4</strong> - Restore All Datas</h3>
                                            
                                            <div class="row">

									            <div class="col-sm-2">
													
									                <button type="button" class="btn btn-xs btn-warning"
									                        data-progress-text="processing..."
									                        data-finish-text="数据更新完成!"
									                        id="startRestore"
									                    >开始</button>

									            </div>
                                                
                                                <div class="col-sm-10">
                                                    
												    <div class="progress">
													    <div id="restoreProcess" class="progress-bar bg-color-blueLight"></div>
												    </div>

												</div>
                                                
									        </div>
                                            
                                            <div class="row">

									            <div class="col-sm-12">
													
									                <textarea id="infoRestore" class="form-control" rows="10"></textarea>

									            </div>
                                                
									        </div>

                                        </div>
									</div>
								</div>
							</form>
						</div>

					</div>
					<!-- end widget content -->
					
				</div>
				<!-- end widget div -->
				
			</div>
			<!-- end widget -->

		</article>
		<!-- WIDGET END -->
		
	</div>

	<!-- end row -->

	<!-- row -->

	<div class="row">

		<!-- a blank row to get started -->
			
	</div>

	<!-- end row -->

</section>
<!-- end widget grid -->

<script type="text/javascript">
    pageSetUp();

    loadScript("/Assets/Bootstrap/plugin/progressbar/bootstrap-progressbar.js", loadComplete);

    function loadComplete() {
        readyForStep1();
        readyForStep2();
        readyForStep4();
    }

    function readyForStep1 () {
        var $btn = $('#startBackup');
        var $progress = $('#backupProcess');

        var dataInfos = [
            { "table": "sys_CodeRecorder", "controller": "System", "action": "ExportCodeRecordData" },
            { "table": "r_Assets", "controller": "Assets", "action": "ExportData" },
            { "table": "s_Site", "controller": "Site", "action": "ExportData" },
            { "table": "s_PageGroup", "controller": "PageGroup", "action": "ExportData" },
            { "table": "s_Page", "controller": "Page", "action": "ExportData" }
        ];

        function progress(i) {
            $.ajax({
                url: "/Manage/" + dataInfos[i].controller + "/" + dataInfos[i].action,
                async: true 
            }).done(function (data, textStatus, jqXHR) {
                if (data.Success) {
                    $('#infoBackup').val($('#infoBackup').val() + '备份 ' + dataInfos[i].table + ' 成功！\r\n');

                    var curNum = i + 1;

                    $progress.attr({
                        'aria-valuetransitiongoal': curNum
                    })
                    .progressbar({
                        display_text: 'center',
                        use_percentage: false
                    });

                    if (curNum == dataInfos.length) {
                        $btn.button('finish');
                    } else {
                        progress(curNum);
                    }
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $btn.button('reset');
            });
        }

        $progress.attr({
                'aria-valuemax': dataInfos.length,
                'aria-valuetransitiongoal': 0
            })
            .progressbar({
                display_text: 'center',
                use_percentage: false
            });

        $btn.click(function() {
            $btn.button('progress');

            progress(0);
        });

    }

    function readyForStep2() {
        var $btn = $('#startUpgrade');

        function progress(i) {
            $.ajax({
                url: "/Manage/System/Upgrade",
                type: "POST",
                async: true
            }).done(function (data, textStatus, jqXHR) {
                if (data.Success) {
                    $('#infoUpgrade').val(data.Message);

                    $btn.button('finish');
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $btn.button('reset');
            });
        }

        $btn.click(function () {
            $btn.button('progress');

            progress(0);
        });

    }

    function readyForStep4() {
        var $btn = $('#startRestore');
        var $progress = $('#restoreProcess');

        var dataInfos = [
            { "table": "sys_CodeRecorder", "controller": "System", "action": "ImportCodeRecordData" },
            { "table": "r_Assets", "controller": "Assets", "action": "ImportData" },
            { "table": "s_Site", "controller": "Site", "action": "ImportData" },
            { "table": "s_PageGroup", "controller": "PageGroup", "action": "ImportData" },
            { "table": "s_Page", "controller": "Page", "action": "ImportData" }
        ];

        function progress(i) {
            $.ajax({
                url: "/Manage/" + dataInfos[i].controller + "/" + dataInfos[i].action,
                async: true
            }).done(function (data, textStatus, jqXHR) {
                if (data.Success) {
                    $('#infoBackup').val($('#infoBackup').val() + '还原 ' + dataInfos[i].table + ' 成功！\r\n');

                    var curNum = i + 1;

                    $progress.attr({
                        'aria-valuetransitiongoal': curNum
                    })
                    .progressbar({
                        display_text: 'center',
                        use_percentage: false
                    });

                    if (curNum == dataInfos.length) {
                        $btn.button('finish');
                    } else {
                        progress(curNum);
                    }
                }
            }).fail(function (jqXHR, textStatus, errorThrown) {
                $btn.button('reset');
            });
        }

        $progress.attr({
            'aria-valuemax': dataInfos.length,
            'aria-valuetransitiongoal': 0
        })
            .progressbar({
                display_text: 'center',
                use_percentage: false
            });

        $btn.click(function () {
            $btn.button('progress');

            progress(0);
        });

    }
</script>